<template>
  <div class="webconfig-container">
    <el-card>
      <template> </template>
      <el-tabs v-model="activeTab" class="webconfig-tabs">
        <el-tab-pane label="银行配置" name="bank">
          <div class="tab-content">
            <div class="bank-accounts">
              <el-card
                v-for="(config, index) in bankConfigList"
                :key="index"
                class="bank-card"
                shadow="hover"
              >
                <template #header>
                  <div class="card-header">
                    <span>账户{{ index + 1 }}</span>
                    <!-- <el-button v-if="bankConfigList.length > 1" type="danger" size="small" @click="removeBankConfig(index)">删除</el-button> -->
                  </div>
                </template>
                <el-form :model="config" label-width="120px">
                  <el-form-item label="账户名称" prop="account">
                    <el-input
                      v-model="config.account"
                      placeholder="请输入账户名称"
                      style="width: 400px"
                    />
                  </el-form-item>
                  <el-form-item label="银行名称" prop="bankName">
                    <el-input
                      v-model="config.bankName"
                      placeholder="请输入银行名称"
                      style="width: 400px"
                    />
                  </el-form-item>
                  <el-form-item label="银行账号" prop="bankNum">
                    <el-input
                      v-model="config.bankNum"
                      placeholder="请输入银行账号"
                      style="width: 400px"
                    />
                  </el-form-item>
                  <el-form-item label="银行联行号" prop="bankUnion">
                    <el-input
                      v-model="config.bankUnion"
                      placeholder="请输入银行联行号"
                      style="width: 400px"
                    />
                  </el-form-item>
                  <el-form-item label="汇率" prop="rate">
                    <el-input
                      v-model="config.rate"
                      placeholder="请输入汇率"
                      style="width: 400px"
                    />
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
            <div class="bank-actions">
              <el-button type="success" @click="saveBankConfig"
                >保存所有银行配置</el-button
              >
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="邮箱配置" name="email">
          <div class="tab-content">
            <el-form :model="emailConfig" label-width="120px">
              <el-form-item label="发件邮箱" prop="from">
                <el-input
                  v-model="emailConfig.from"
                  placeholder="请输入发件邮箱"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="邮箱密码" prop="fromPwd">
                <el-input
                  v-model="emailConfig.fromPwd"
                  type="password"
                  placeholder="请输入邮箱密码"
                  style="width: 400px"
                  show-password
                />
              </el-form-item>
              <el-form-item label="SMTP主机" prop="smtpHost">
                <el-input
                  v-model="emailConfig.smtpHost"
                  placeholder="请输入SMTP主机"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="SMTP端口" prop="smtpPort">
                <el-input
                  v-model="emailConfig.smtpPort"
                  placeholder="请输入SMTP端口"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveBankConfig"
                  >保存邮箱配置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <el-tab-pane label="出金配置" name="withdrawal">
          <div class="tab-content">
            <el-form :model="outConfig" label-width="120px">
              <el-form-item label="出金地址" prop="address">
                <el-input
                  v-model="outConfig.address"
                  placeholder="请输入出金地址"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="回调地址" prop="callbackUrl">
                <el-input
                  v-model="outConfig.callback_url"
                  placeholder="请输入回调地址"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="对接地址" prop="docking_url">
                <el-input
                  v-model="outConfig.docking_url"
                  placeholder="请输入对接地址"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="加密方式" prop="encryption">
                <el-input
                  v-model="outConfig.encryption"
                  placeholder="请输入加密方式"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="下单地址" prop="place_order_url">
                <el-input
                  v-model="outConfig.place_order_url"
                  placeholder="请输入下单地址"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item
                label="余额查询地址"
                prop="search_balance_url
"
              >
                <el-input
                  v-model="outConfig.search_balance_url"
                  placeholder="请输入余额查询地址"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="订单查询地址" prop="search_order_url">
                <el-input
                  v-model="outConfig.search_order_url"
                  placeholder="请输入订单查询地址"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveBankConfig"
                  >保存出金配置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <el-tab-pane label="USDT配置" name="usdt">
          <div class="tab-content">
            <el-form :model="usdtConfig" label-width="120px">
              <el-form-item label="USDT地址" prop="usdtAddress">
                <el-input
                  v-model="usdtConfig.usdtAddress"
                  placeholder="请输入USDT地址"
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="汇率" prop="rate">
                <el-input-number
                  v-model="usdtConfig.rate"
                  placeholder="请输入汇率"
                  style="width: 400px"
                  :precision="2"
                  :step="0.01"
                  :controls="false"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveBankConfig"
                  >保存USDT配置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getWebconfigList, updateWebconfig } from "@/api/system";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";

// 当前激活的tab
const activeTab = ref("bank");

// 银行配置数据列表
const bankConfigList = ref([
  {
    account: "",
    bankName: "",
    bankNum: 0,
    bankUnion: 0,
    rate: 0,
  },
]);

// 邮箱配置数据
const emailConfig = ref({
  from: "",
  fromPwd: "",
  smtpHost: "",
  smtpPort: "",
});

// 出金配置数据
const outConfig = ref({
  address: "",
  callback_url: "",
  docking_url: "",
  encryption: "",
  place_order_url: "",
  search_balance_url: "",
  search_order_url: "",
});

// USDT配置数据
const usdtConfig = ref({
  rate: 0,
  usdtAddress: "",
});

onMounted(async () => {
  const response = await getWebconfigList();
  const data = response.data.data;

  // 更新各个配置数据
  if (data.bankConfig && data.bankConfig.length > 0) {
    bankConfigList.value = data.bankConfig.map((config: any) => ({
      ...config,
      rate: Number(config.rate / 100).toFixed(2),
    }));
  }
  if (data.emailConfig) {
    emailConfig.value = { ...data.emailConfig };
  }
  if (data.outConfig) {
    outConfig.value = { ...data.outConfig };
  }
  if (data.usdtConfig) {
    usdtConfig.value = { ...data.usdtConfig };
    usdtConfig.value.rate = Number(usdtConfig.value.rate) / 100;
  }
});

// 保存银行配置
const saveBankConfig = async () => {
  try {
    // 这里调用保存银行配置的API
    bankConfigList.value.forEach((config: any) => {
      config.rate = Number(config.rate) * 100;
    });
    updateWebconfig({
      bankConfig: bankConfigList.value,
      emailConfig: emailConfig.value,
      outConfig: outConfig.value,
      usdtConfig: usdtConfig.value,
    }).then((res: any) => {
      if (res.code === 0) {
        ElMessage.success("配置保存成功");
        activeTab.value = "bank";

        // 刷新当前页面
        window.location.reload();
      } else {
        ElMessage.error("配置保存失败");
      }
    });
  } catch (error) {
    ElMessage.error("配置保存失败");
  }
};
</script>

<style scoped>
.webconfig-container {
  padding: 20px;
}

.webconfig-tabs {
  margin-top: 10px;
}

.tab-content {
  padding: 20px;
  min-height: 400px;
}

.tab-content p {
  color: #666;
  font-size: 14px;
  /* text-align: center; */
  margin-top: 20px;
}

.bank-accounts {
  margin-bottom: 20px;
}

.bank-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.bank-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 20px 0;
  border-top: 1px solid #ebeef5;
}
</style>
